<template>
  <div class="register-box">
    <div class="top">
      <div class="title">
        {{ getHospitalName() }}
      </div>
      <div class="level">
        <el-icon style="margin-left: 10px; margin-right: 5px" color="pink"
          ><Pointer
        /></el-icon>
        {{ getHospitalLevel() }}
      </div>
    </div>
    <div class="content">
      <div class="lef">
        <img :src="`data:image/jpeg;base64,` + getHospitalImg()" />
      </div>
      <div class="rig">
        <div class="rule-title">挂号规则</div>
        <div>
          预约周期：{{ getHospitalDay() }}天 放号时间：{{
            getHospitalOpen()
          }}
          停挂时间：{{ getHospitalStop() }}
        </div>
        <div>具体位置：{{ getHospitalPosition() }}</div>
        <div>规划路线：{{ getHospitalLine() }}</div>
        <div>退号时间：就诊前一工作日{{ getHospitalQuit() }} 前取消</div>
        <div class="rule-title">预约挂号规则</div>
        <div v-for="item in getHospitalAddress()" :key="item">{{ item }}</div>
      </div>
    </div>
    <div class="footer">
      <div class="lef">
        <ul>
          <li
            v-for="(item, index) in getDepartmentName()"
            :key="item.depcode"
            @click="addActive(index)"
            :class="{ active: index === num }"
          >
            {{ item.depname }}
          </li>
        </ul>
      </div>
      <div class="rig">
        <div
          v-for="item in getDepartmentName()"
          :key="item.depcode"
          class="dep-contain"
        >
          <div class="dep-name">{{ item.depname }}</div>
          <ul class="dep-text">
            <li
              v-for="child in item.children"
              :key="child.depcode"
              @click="goRegisterDetail(child.depcode)"
            >
              {{ child.depname }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "registerPage",
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    // 医院名字
    getHospitalName() {
      return this.$store.state.hospitalDetail.hospitalInfo.hospital
        ? this.$store.state.hospitalDetail.hospitalInfo.hospital.hosname
        : "";
    },
    getHospitalLevel() {
      return this.$store.state.hospitalDetail.hospitalInfo.hospital
        ? this.$store.state.hospitalDetail.hospitalInfo.hospital.param
            .hostypeString
        : "";
    },
    getHospitalImg() {
      return this.$store.state.hospitalDetail.hospitalInfo.hospital
        ? this.$store.state.hospitalDetail.hospitalInfo.hospital.logoData
        : "";
    },
    getHospitalDay() {
      return this.$store.state.hospitalDetail.hospitalInfo.bookingRule
        ? this.$store.state.hospitalDetail.hospitalInfo.bookingRule.cycle
        : "";
    },
    getHospitalOpen() {
      return this.$store.state.hospitalDetail.hospitalInfo.bookingRule
        ? this.$store.state.hospitalDetail.hospitalInfo.bookingRule.releaseTime
        : "";
    },
    getHospitalStop() {
      return this.$store.state.hospitalDetail.hospitalInfo.bookingRule
        ? this.$store.state.hospitalDetail.hospitalInfo.bookingRule.stopTime
        : "";
    },
    getHospitalPosition() {
      return this.$store.state.hospitalDetail.hospitalInfo.hospital
        ? this.$store.state.hospitalDetail.hospitalInfo.hospital.param
            .fullAddress
        : "";
    },
    getHospitalLine() {
      return this.$store.state.hospitalDetail.hospitalInfo.hospital
        ? this.$store.state.hospitalDetail.hospitalInfo.hospital.route
        : "";
    },
    getHospitalQuit() {
      return this.$store.state.hospitalDetail.hospitalInfo.bookingRule
        ? this.$store.state.hospitalDetail.hospitalInfo.bookingRule.quitTime
        : "";
    },
    getHospitalAddress() {
      return this.$store.state.hospitalDetail.hospitalInfo.bookingRule
        ? this.$store.state.hospitalDetail.hospitalInfo.bookingRule.rule
        : "";
    },
    getDepartmentName() {
      return this.$store.state.hospitalDetail.hospitalDepartment
        ? this.$store.state.hospitalDetail.hospitalDepartment
        : [];
    },
    addActive(index) {
      this.num = index;
      let allDep = document.querySelectorAll(".dep-name");
      allDep[this.num].scrollIntoView({
        behavior: "smooth", //过渡动画效果
        block: "start", //滚动到的位置，默认是起始位置
      });
    },
    goRegisterDetail(depcode) {
      this.$router.push({
        path: "/hospital/register_step1",
        query: { hoscode: this.$route.query.hoscode, depcode: depcode },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.register-box {
  .top {
    height: 40px;
    display: flex;
    align-items: end;
    .title {
      font-size: 30px;
      font-weight: 700;
    }
    .level {
      color: #7f7f7f;
    }
  }
  .content {
    margin-top: 20px;
    display: flex;
    .lef {
      width: 80px;
      margin-right: 20px;
      img {
        width: 80px;
        height: 80px;
      }
    }
    .rig {
      font-size: 14px;
      color: #7f7f7f;
      div {
        margin-top: 10px;
      }
      .rule-title {
        color: black;
      }
    }
  }
  .footer {
    display: flex;
    height: 500px;
    margin-top: 20px;
    .lef {
      width: 80px;
      margin-right: 20px;
      background-color: #f8f8f8;
      height: 100%;
      ul {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        li {
          cursor: pointer;
          text-align: center;
          width: 100%;
          flex: 1;
          line-height: 41px;
          font-size: 14px;
          color: #7f7f7f;
          &.active {
            background-color: #ffffff;
            color: #ff0000;
            width: 100%;
            border-left: 1px solid #ff0000;
          }
        }
      }
    }
    .rig {
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      flex: 1;
      .dep-contain {
        color: #7f7f7f;
        .dep-name {
          margin-top: 10px;
          background-color: #f8f8f8;
        }
        .dep-text {
          display: flex;
          flex-wrap: wrap;
          li {
            width: 33.33%;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>
